<template>

  <div class="home container">

    <div class="l_content">

      <div class="l_content_1 bolder_content">

        <div class="left">
          <button class="btn btn_defalut">
            查询
          </button>
        </div>

        <div class="right">
          <div class="dropdown">
            <button class="btn btn_white">
              更多操作
            </button>
            <div class="dropdown_content">
              <button class="btn btn_white">
                作废
              </button>
              <button class="btn btn_white">
                取消作废
              </button>
            </div>
          </div>
         

        </div>

      </div>
      <div class="l_content_2">

        <table class="table table-border">

          <thead>

            <tr>

              <th>手术间</th>

              <th>时间</th>

              <th>手术医生</th>

              <th>床位</th>

              <th>患者</th>

              <th>手术名称</th>

              <th>术前诊断</th>

              <th>麻醉方式</th>

              <th>备注</th>

              <th>急诊</th>

              <th>隔离</th>

              <th>访视/随访情况</th>

            </tr>

          </thead>

          <tbody>

            <tr>

              <td>702</td>

              <td>10:00</td>

              <td>何妙春</td>

              <td>04</td>

              <td>467048</td>

              <td>欧阳安军</td>

              <td>左眼白内障超声化抽手术</td>
              
              <td>左眼老年性白内障</td>

              <td>全麻</td>

              <td></td>

              <td></td>

              <td></td>

            </tr>

            <tr>

              <td>702</td>

              <td>10:00</td>

              <td>何妙春</td>

              <td>04</td>

              <td>467048</td>

              <td>欧阳安军</td>

              <td>左眼白内障超声化抽手术</td>
              
              <td>左眼老年性白内障</td>

              <td>全麻</td>

              <td></td>

              <td></td>

              <td></td>
              
            </tr>

          </tbody>
          <tfoot>
          
          </tfoot>

        </table>

      </div>



    </div>

    <div class="r_content">
      <div class="btn_content">
        <button class="btn btn_radius btn_defalut">
          何妙春
        </button>
        <button class="btn btn_radius btn_grey">
          何妙春
        </button>
        <button class="btn btn_radius btn_grey">
          何妙春
        </button>
        <button class="btn btn_radius btn_grey">
          何妙春
        </button>
        <button class="btn btn_radius btn_grey">
          何妙春
        </button>
        <button class="btn btn_radius btn_grey">
          何妙春
        </button> 
      </div>
    </div>

  </div>

</template>

<script lang="ts">
  import {
    Component,
    Vue
  } from 'vue-property-decorator';


  @Component({

    components: {



    },

  })

  export default class Home extends Vue {

  }
</script>

<style lang="scss" scpoed>
  .home {
    .l_content {
      width: 88%;
      text-align: left;
      overflow: hidden;
      float:left;
      .l_content_1{
        padding: 0.2rem;
        overflow: hidden;
        @include bolder;
      }
      .l_content_2{
        
        margin-top:0.2rem;
        .table{
          tr{

            th:nth-child(7), td:nth-child(7),
            th:nth-child(8), td:nth-child(8){
              width:18%;
              padding: 8px 3%;
            }

            th:nth-child(12), td:nth-child(12){
              width:15%;
              padding: 8px 3%;
            }
            
          }
         
        }
      }
    }
    .r_content{
      float:left;
      width:10%;
      @include bolder;
      margin-left: 0.2rem;
      .btn_content{
         padding: 0.1rem;
          .btn{
            margin-top:0.1rem;
            &:first-child{
              margin-top:0rem;
            }
          }

      }
    }
  }
</style>